<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 显示父组件中的姓名 -->
			父组件姓名：{{name}}
			<!-- 使用自定义组件 my-component，并向其传递 age、sex、vip、name 等属性的值 -->
			<my-component :age='age' :sex='sex' :vip='vip' :name='name'></my-component>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			// 定义名为'my-component'的 Vue 组件
			Vue.component('my-component', {
				// 声明组件接收的属性及类型和默认值
				props: {
					// age 属性，类型为数字
					age: Number,
					// sex 属性，类型为字符串
					sex: String,
					// vip 属性，类型为布尔值
					vip: Boolean,
					// name 属性，类型为字符串
					name: String,
					// love 属性，类型为字符串，默认值为'read book'
					love: {
						type: String,
						default: "read book"
					}
				},
				// 定义组件的模板
				template: '<div>子组件姓名：{{myname}},年龄:{{age}},爱好：{{love}}</div>',
				// 定义组件的数据
				data: function() {
					return {
						// 计算子组件中的姓名，在父组件传递的姓名前加上'小'字
						myname: '小' + this.name
					}
				}
			});
			// 创建一个新的 Vue 实例，并将其挂载到具有 id 为 'app' 的元素上
			var app = new Vue({
				el: '#app',
				// 定义实例的数据
				data: {
					// 年龄为 18
					age: 18,
					// 性别为'male'
					sex: 'male',
					// vip 为 false
					vip: false,
					// 姓名为'张三'
					name: '张三'
				}
			})
		</script>
	</body>
</html>